<template>
  <div class="box">
    <div class="login-box">
      <img src="../assets/logo.png">
      <div class="title-text">{{ title }}</div>
      <div class="form-box">
        <el-form ref="form" :model="form" :rules="rules" size="small">
          <el-form-item prop="account">
            <el-input v-model="form.account" prefix-icon="el-icon-user" placeholder="请输入账号" maxlength="50"
                      clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" maxlength="50"
                      clearable
                      type="password"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="code-box">
              <el-input v-model="form.code" prefix-icon="el-icon-key" placeholder="请输入验证码" maxlength="8"
                        clearable></el-input>
              <img
                style="height: 30px;width: 50%;margin-left: 10px;margin-top: 0px;margin-bottom: 0px;cursor: pointer;border: rgba(128,128,128,0.56) 1px solid"
                :src="imageCode" @click="getCodeRequest">
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="remember-password">
        <el-checkbox v-model="rememberPwd" @change="rememberPwdClick">记住账号</el-checkbox>
      </div>
      <div class="login-but">
        <el-button type="primary" size="medium" @click="loginClick" @keyup.enter="loginClick" :loading="loginLoading">
          {{ this.loginLoading ? '正 在 登 录' : '登 录' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode, userLogin } from '@/api/user/userApi'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      title: '轻淘易购后台管理系统',
      imageCode: null,
      codeUuid: null,
      form: {
        account: window.localStorage.getItem('account'),
        password: window.localStorage.getItem('password'),
        code: null,
        codeUuid: null
      },
      loginLoading: false,
      rules: {
        account: [
          {
            required: true,
            message: '请输入登录账号',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      rememberPwd: Boolean(window.localStorage.getItem('remember'))
    }
  },
  created () {
    this.getCodeRequest()
  },
  methods: {
    /* *
    * 登录请求
    *  */
    loginClick () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 判断是否记住密码
          this.isRememberPassword()
          this.loginLoading = true
          this.form.codeUuid = this.codeUuid
          userLogin(this.form).then(res => {
            const msg = res.data.msg
            if (msg !== 'ok') {
              this.$message.warning(msg)
            } else {
              // 存储token
              window.sessionStorage.setItem('token', res.data.token)
              // 存储用户id
              window.sessionStorage.setItem('userId', res.data.userId)
              // 跳转到首页
              this.$router.push('/home')
            }
          }).finally(() => {
            this.loginLoading = false
          })
        }
      })
    },
    /* *
    * 获取验证码
    *  */
    getCodeRequest () {
      getCode().then(res => {
        this.imageCode = 'data:image/gif;base64,' + res.data.img
        this.codeUuid = res.data.codeUuid
      })
    },

    /* *
    * 记住密码
    *  */
    rememberPwdClick (e) {
      this.rememberPwd = e
      window.localStorage.setItem('remember', e)
    },

    /* *
    * 判断是否是记住密码
    *  */
    isRememberPassword () {
      if (this.rememberPwd) {
        // 记录账号，密码
        window.localStorage.setItem('account', this.form.account)
        window.localStorage.setItem('password', this.form.password)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/index-img2.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .login-box {
    background-color: #ffffff;
    width: 260px;
    height: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    padding: 10px;

    img {
      width: 100px;
      height: 100px;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .title-text {
      font-size: 22px;
      color: #000000;
      font-weight: bold;
      margin-bottom: 30px;
      font-family: "华文宋体", serif;
    }

    .login-but {
      margin-top: 30px;

      .el-button {
        width: 250px;
      }
    }

    .remember-password {
      width: 100%;
      padding-left: 25px;
      margin-top: -10px;
    }
  }
}

.code-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
